<template>
	<!-- 自定义搜索 参考微信 头部  开始 -->
	<div class="conversation_head_weichat">
		<div @click="goBack()" class="conversation_head_back_button_weichat" v-if="showBack"><img src="/static/icon/common/return-icon.png" /></div>
		<div class="conversation_head_title_weichat" :class="{'title-center': !showBack}">{{title}}</div>
		<div @click="goSearch()" class="conversation_head_search_button_weichat"><img src="/static/icon/common/search_v1.png" /></div>
		<div @click="toggleAddShow()" class="conversation_head_add_button_weichat"><img src="/static/icon/common/add.png" /></div>
	</div>
	<u-overlay :show="isAddShow" @click="isAddShow = false" :duration="400" :z-index ="999" :opacity="0">
		<div class="conversation_head_add_area_weichat">
			<div class="conversation_head_add_area_top_triangle_weichat"><div id="triangle-up"></div></div>
			<div class="conversation_head_add_area_ul_show">
				<div class="conversation_head_add_area_ul_show_li" @click="createQunChat()">
					<div class="show_img"><img src="/static/icon/common/option-1.png"></div>
					<div class="show_text">发起群聊</div>				
				</div>
				<div class="conversation_head_add_area_ul_show_li" @click="addFriend()">
					<div class="show_img"><img src="/static/icon/common/option-2.png"></div>
					<div class="show_text">添加好友/群聊</div>	
				</div>
			</div>
		</div>
	</u-overlay>	
	<!-- 自定义搜索 参考微信 头部  结束 -->
</template>

<script setup lang="ts">
	import { ref} from '/TUIKit/adapter-vue';
	import {
	  TUIStore,
	  StoreName,
	} from '@tencentcloud/chat-uikit-engine';
	import { isUniFrameWork } from '/TUIKit/utils/env';
	import { TUIGlobal } from '@tencentcloud/universal-api';
	// 定义 传递参数
	defineProps({
	  title: {
	    type: String,
	    default: '聊天'
	  },
	  showBack: {
	    type: Boolean,
	    default: false
	  }
	})
	
	// 添加好友开关
	const isAddShow = ref<boolean>(false);
	// 显示隐藏 添加好友功能
	const toggleAddShow = () => {
	  isAddShow.value = !isAddShow.value;
	}
	// 进行搜索
	const goSearch = () =>{
		// 首先云端切换其搜索状态 组件会对应监听到的
		TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', true);
		isUniFrameWork && TUIGlobal?.navigateTo({
		  url: '/pages/search/index',
		});
	}
	// 添加好友
	const addFriend = () =>{
		isAddShow.value = false
		uni.navigateTo({
			url:'/pages/conversation/addFriend'
		})
	}
	// 发起群聊
	const createQunChat = () =>{
		isAddShow.value = false
		uni.navigateTo({
			url:'/pages/conversation/createQunChat'
		})
	}
	// 返回上一层
	const goBack = () =>{
		uni.navigateBack()
	}
</script>

<style>
/* 头部三角形的样式 */
#triangle-up {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #666;
}

/* 头部容器 */
.conversation_head_weichat {
  width: 100%;
  height: calc(44px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 0 10rpx;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

/* 标题 */
.conversation_head_title_weichat {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: calc(44px + env(safe-area-inset-top));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 标题居中（没有返回按钮时） */
.title-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

/* 返回按钮 */
.conversation_head_back_button_weichat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.conversation_head_back_button_weichat img {
  width: 24px;
  height: 24px;
}

/* 搜索按钮 */
.conversation_head_search_button_weichat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.conversation_head_search_button_weichat img {
  width: 24px;
  height: 24px;
}

/* 添加按钮 */
.conversation_head_add_button_weichat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.conversation_head_add_button_weichat img {
  width: 24px;
  height: 24px;
}

/* 添加好友弹窗 */
.conversation_head_add_area_weichat {
  width: 200px;
  position: fixed;
  right: 0;
  top: calc(44px + env(safe-area-inset-top));
  z-index: 999;
}

/* PC端弹窗位置调整 */
@media screen and (min-width: 768px) {
  .conversation_head_add_area_weichat {
    right: calc(50% - 205px);
    max-width: 200px;
	top: 17%;
  }
}

.conversation_head_add_area_top_triangle_weichat {
  position: absolute;
  top: 10%;
  right: 20px;
}

/* 弹窗列表样式 */
.conversation_head_add_area_ul_show {
  width: 100%;
  background-color: #333;
  border-radius: 8px;
  color: white;
  padding: 10px 0;
  position: absolute;
  right: 0;
  top: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.conversation_head_add_area_ul_show img {
  width: 30px;
  height: 30px;
  margin: 5px;
}

.conversation_head_add_area_ul_show_li {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.conversation_head_add_area_ul_show_li:hover {
  background-color: #444;
}

.show_img {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show_text {
  flex: 1;
  font-size: 14px;
  color: white;
  padding-left: 10px;
}

</style>